import { useLoading } from '@/hooks/baseHook';
import { Modal, Form, Select, message } from 'antd';
import { FC } from 'react';
import { datasetAddFiles } from '@/api/sr-stms';
const { Option } = Select;

interface AddFilesModalProps {
  visible: boolean;
  onCancel(): void;
  callback(): void;
  datasetList?: any[];
  fileIds: React.Key[];
}

const AddFilesModal: FC<AddFilesModalProps> = (props) => {
  const { visible, datasetList, onCancel, fileIds, callback } = props;
  const [form] = Form.useForm();
  const [loading, load] = useLoading();

  const handleCancel = () => {
    form.resetFields();
    onCancel();
  };

  const handleOk = async () => {
    const vals = await form.validateFields();
    await load(
      datasetAddFiles({
        dataset_id: vals.dataset_id,
        file_id_list: fileIds,
      }),
    );

    message.success('添加成功！');
    handleCancel();
    callback();
  };

  return (
    <Modal
      title="添加图片至数据集"
      visible={visible}
      onCancel={handleCancel}
      onOk={handleOk}
      okButtonProps={{ loading }}
    >
      <Form form={form}>
        <Form.Item
          name="dataset_id"
          label="数据集名称"
          rules={[{ required: true, message: '必选！' }]}
        >
          <Select showSearch optionFilterProp="children">
            {datasetList?.map((item) => {
              return (
                <Option value={item.id} key={item.id}>
                  {item.dataset_name}
                </Option>
              );
            })}
          </Select>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default AddFilesModal;
